<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    胡子语法-->
    <h3>{{title}}</h3>
</div>
<script>
    var v = new Vue({
        el: "#app", // 绑定元素, 不能绑定 body
        data: {
            title: "测试标题"
        }    // 数据模型
    })
</script>

<fieldset id="f1">
    <legend>练习题1</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <img v-bind:src="head" width="50%">
            <div style="display: inline-block; vertical-align: top; line-height: 2em;">
                <label>姓名: </label><span>{{name}}</span><br>
                <label>性别: </label><span v-text="gender">女</span><br>
                <label>绰号: </label><span v-pre>{{alias}}</span><br>
                <label>介绍: </label><span v-html="intro"></span><br>
                <label>斗篷: </label><span v-cloak>{{'test'}}</span><br>
            </div>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">{
    name: "武松",
    gender: "男",
    alias: "行者",
    age: 28,
    head: 'https://img1.baidu.com/it/u=137100414,3803336036&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707'
}
            </pre>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
<script>
    setTimeout(() => {
        var f1 = new Vue({
            el: "#f1",
            data: {
                name: "武松",
                gender: "男",
                alias: "行者",
                age: 28,
                head: 'https://img1.baidu.com/it/u=137100414,3803336036&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
                intro: '<h3>生平介绍</h3>'
            }
        })
    }, 5000);
</script>

<fieldset id="f2">
    <legend>练习题2</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <div style="margin: 5px; text-align: center;">
                平均年龄: {{avgAge}}, 平均武力: 88, 总武力: 264
            </div>
            <div v-for=" h in heros" style="border: 1px solid blueviolet; padding: 5px; margin: 5px;">
                <img :src="h.head" height="130px">
                <div style="display: inline-block; vertical-align: top; line-height: 1.3em;">
                    <label>姓名: </label><span>{{h.name}}</span><br>
                    <label>性别: </label><span>{{h.gender}}</span><br>
                    <label>绰号: </label><span>{{h.alias}}</span><br>
                    <label>年龄: </label><span>{{h.age}}</span><br>
                    <label>武力: </label><span>{{h.武力}}</span><br>
                </div>
            </div>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">
            </pre>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
<script>
    var f2 = new Vue({
        el: "#f2",
        data: {
            heros: [{
                name: "武松",
                gender: "男",
                alias: "行者",
                age: 28,
                武力: 90,
                head: 'https://img1.baidu.com/it/u=137100414,3803336036&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707'
            },
                {
                    name: "林冲",
                    gender: "男",
                    alias: "豹子头",
                    age: 95,
                    head: 'https://img2.baidu.com/it/u=1956721953,4058938663&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=994'
                },
                {
                    name: "扈三娘",
                    gender: "女",
                    alias: "一丈青",
                    age: 88,
                    head: 'https://img0.baidu.com/it/u=3036008366,3187194146&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'
                }]
        },
        computed: {
            avgAge() {
                let sum = 0;
                this.heros.forEach(h => {
                    sum += h.age;
                })
                return sum / this.heros.length;
            }
        }
    })
</script>

<fieldset id="f3">
    <legend>练习题3</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <div>
                <img width="50%" :src="head"
                     style="width: 200px ; height: 200px"
                     :style="{objectFit:'cover' , borderRadius:'50%' , overflow:'hidden'}"
                ><br>
                <span>{{name}}</span>
            </div>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">
            </pre>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
<script>
    var f3 = new Vue({
        el: "#f3",
        data: {
            name: "林冲",
            head: "https://img0.baidu.com/it/u=4053272622,2573201558&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=584",
            imgStyle: {
                width: "200px",
                height: "200px",
                objectFit: "cover",
                borderRadius: "50%",
                overflow: "hidden"
            },
            spanStyle: {
                display: "inline-block",
                border: "1px blue solid",
                width: "100%",
                padding: "5px 10px",
                boxSizing: "border-box",
            }
        }
    })
</script>

<style>
    .border {
        border: 2px solid blue;
    }

    .text {
        color: red;
        text-align: center;
    }

    .size {
        width: 150px;
        height: 150px;
        padding: 5px;
        display: inline-block;
        margin: 5px;
        padding: 5px;
    }
</style>
<fieldset id="f4">
    <legend>练习题4</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; column-gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <div id="div1" :class="['border','text']">
                <img width="100px"
                     src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
                <br> 关注样式
            </div>

            <div id="div2" :class="{ border: true , text: false, size : true}">
                <img width="100px"
                     src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
                <br> 关注样式
            </div>

            <button @click="cls = !cls">切换样式class</button>
            <div id="div3" v-if="cls==true" :class="class1()">
                <img width="100px"
                     src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
                <br> 关注样式
            </div>
            <div id="div4" v-else :class="class2()">
                <img width="100px"
                     src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
                <br> 关注样式
            </div>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">
            </pre>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
<script>
    var f4 = new Vue({
        el: "#f4",
        data: {
            cls: true
        },
        methods: {
            class1: function () {
                return ["text", "size"];
            },
            class2() {
                return {border: true, size: true};
            }
        }
    })
</script>

<!--  // Vue对象不能嵌套
<div id="a">
    <div id="b">

    </div>
    <script>
        var b = new Vue();
    </script>
</div>
<script>
    var a = new Vue();
</script>
-->

<fieldset id="f5">
    <legend>练习题4</legend>
    <div style="display: grid; grid-template-columns: 93% auto; column-gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);"><h3>阻止事件冒泡</h3>
            <div @click="alert('div4')" style="width: 200px; height: 200px; background: red;">
                <div @click="alert('div5')" id="div5" style="width: 150px; height: 150px; background: green;">
                    <div @click.stop="alert('div6')" id="div6"
                         style="width: 100px; height: 100px; background: blue;"></div>
                </div>
            </div>
            <h3>阻止默认行为</h3>
            <form action="https://baidu.com" target="_blank">
                <button @click.prevent="alert('百度')">百度</button>
            </form>
            <a href="https://taobao.com" @click.prevent="" target="_blank">淘宝</a></div>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
<script>
    var f5 = new Vue({
        el: "#f5"
    })
</script>

<fieldset id="f6">
    <legend>练习题5</legend>
    <div style="display: grid; grid-template-columns: 93% auto; gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <table border="1" style="width: 100%; text-align: center;">
                <tbody>
                <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>绰号</th>
                    <th>力量</th>
                    <th>智力</th>
                    <th>敏捷</th>
                    <th>综合战斗力</th>
                </tr>
                <tr v-for=" (h,i) in heroes">
                    <td>第{{ i+1 }}名</td>
                    <td>{{h.name}}</td>
                    <td>{{h.alias}}</td>
                    <td>
                        <button @click="h.p--;sort()">-</button>
                        {{h.p}}
                        <button @click="h.p++;sort()">+</button>
                    </td>
                    <td>
                        <button>-</button>
                        {{h.i}}
                        <button>+</button>
                    </td>
                    <td>
                        <button>-</button>
                        {{h.a}}
                        <button>+</button>
                    </td>
                    <td>{{h.p+h.i+h.a}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
            <small>排序</small>
            <select v-model="orderBy" @change="sort()">
            <option>力量</option>
            <option>智力</option>
            <option>敏捷</option>
            <option>综合</option>
        </select></div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">/**
1. 将水浒英雄显示到表格中
2. 实现属性值的加减
3. 统计出每个影响的综合战斗力: 力量+智力+敏捷
4. 根据实时计算结果, 实现排序
*/
            </pre>
    </div>
</fieldset>
<script>
    var Hero = function (name, alias, p, i, a) {
        this.name = name;
        this.alias = alias;
        this.p = p;
        this.i = i;
        this.a = a;
    }
    var f6 = new Vue({
        el: "#f6",
        data: {
            orderBy:"力量",
            heroes: [
                new Hero("林冲", "豹子头", 99, 85, 90),
                new Hero("武松", "行者", 98, 80, 88),
                new Hero("秦明", "霹雳火", 95, 82, 85),
                new Hero("白胜", "白日鼠", 75, 80, 85),
                new Hero("石秀", "拼命三郎", 97, 82, 83),
            ]
        },
        created() {
            // 在数据模型(data)构建完成之后, 执行的事件钩子函数
            this.sort();
        },
        methods: {
            sort() {
                if(this.orderBy=='力量'){
                    this.heroes.sort((a, b) => b.p - a.p);
                } else if(this.orderBy=='智力'){
                    this.heroes.sort((a, b) => b.i - a.i);
                } else if(this.orderBy=='敏捷'){
                    this.heroes.sort((a, b) => b.a - a.a);
                } else {
                    this.heroes.sort((a, b) =>(b.a+b.i+b.p) - (a.a+a.i+a.p));
                }
            }
        }
    })
</script>

<fieldset id="f7">
    <legend>练习题6</legend>
    <div style="display: grid; grid-template-columns: 46% 46% auto; gap: 10px;">
        <div style="padding: 10px; border: 1px solid rgb(238, 238, 238);">
            <form action="" style="line-height: 2em;">
                姓名: <input name="name" v-model="sj.name"><br>
                绰号: <input name="alias" v-model="sj.alias"><br>
                学历: <select name="edu" v-model="sj.edu">
                            <option v-for="e in eduItems" :value="e">{{e}}</option>
                     </select><br>
                职位: <span v-for="j in jobItems">
                        <input name="job" type="radio" :value="j" v-model="sj.job">
                        {{j}}
                     </span><br>
                爱好: <span v-for="l in likeItems">
                        <input name="like" type="checkbox" :value="l" v-model="sj.like">
                        {{l}}
                      </span><br>
                介绍: <textarea name="desc" v-model="sj.desc"></textarea><br>
                <button style="margin-left: 166px;">提交</button>
            </form>
        </div>
        <pre contenteditable="true"
             style="overflow: auto; font-family: Consolas; padding: 10px; border: 1px solid rgb(238, 238, 238); margin: 0px;">/**
1. 学历, 职位, 爱好的选项添加到对应的控件中
2. 将宋江的个人信息绑定到表单的对应元素中
*/
            </pre>
        <div style="line-height: 2em; text-align: center;">
            <button>复制</button>
        </div>
    </div>
</fieldset>
<script>
    var f7 = new Vue({
        el:"#f7",
        data:{
            sj : {
                name : "宋江",
                alias : "及时雨",
                edu : "秀才",
                job : "军师",
                like : ["读书","下棋","喝酒"],
                desc : "宋江（1073年—1124年），字公明，绰号呼保义、及时雨、孝义黑三郎，施耐庵所作古典名著《水浒传》中的主人公。原为山东省郓城县押司，身材矮小，面目黝黑，为梁山起义军领袖"
            },
            eduItems : ["进士","贡士","举人","秀才"],
            jobItems : ["老大","军师","武将","工匠"],
            likeItems : ["使枪","弄棒","喝酒","绣花","读书","蹴鞠","书法","绘画","下棋"],
        }
    })
</script>

</body>
</html>